import React, { Component } from 'react';
import { FolderOutlined, EllipsisOutlined,CommentOutlined ,ScissorOutlined,SmileOutlined } from '@ant-design/icons';
import { Button,Input } from 'antd';
class Topics extends Component {
    state = {
        list: [],
        scrollPosition: 0,
        message: '',
        messages: []
      };
      componentDidMount() {
         fetch('https://www.fastmock.site/mock/9e4bbf9e35ad15942010865690c87ac6/api/topics')
      .then(res => res.json())
      .then(res => {
        console.log(res);
        this.setState({ list: res.data });
      });
    window.addEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    const scrollPosition = window.scrollY;
    this.setState({ scrollPosition });
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  render() {
    return (
      // 左边头像的显示
      <div style={{ display: 'flex' }}>
        <div 
        style={{ display: 'inline-block', 
        marginRight: '20px', 
        overflowY: 'scroll', 
        maxHeight: '97vh' 
        }}
        >
          {this.state.list.map((item, index) => {
            return (
              <div
                key={item.id}
                style={{
                  listStyle: 'none',
                  borderRadius: 10,
                  marginBottom: '10px',
                  transform: `translateY(${this.state.scrollPosition * 0.5}px)`
                }}
              >
                <img
                  style={{ width: '60px', height: '60px', borderRadius: '50%' }}
                  src={item.author.avatar_url}
                  alt=""
                />
              </div>
            );
          })}
        </div>
        {/* 第一个容器,包含用户名和图标 */}
        <div 
        style={{ 
          border: '1px solid #BEBEBE',
          flex: 1, borderRadius: 10,
          }}
        >
          {this.state.list.length > 0 && <span>{this.state.list[0].title}</span>}
          <EllipsisOutlined className="icon" style={{ color: '#55CA92',marginLeft:800, }} />
          {/* 第二个容器,聊天内容的显示容器 */}
          <div 
          style={{ 
            border: '1px solid #BEBEBE', 
            flex: 1, 
            marginTop: 30,
            height:'70vh', 
            }}
          >
            {this.state.messages.map((message, index) => (
                <div 
                key={index} 
                style={{ 
                  border:'1px solid #BEBEBE', 
                  padding: '10px', 
                  borderRadius: '10px', 
                  marginBottom: '10px' 
                  }}
                >
                    {message}
                </div>
                ))}
          </div>
          {/* 聊天的图标 */}
          <SmileOutlined 
          className="icon" 
          style={{ 
            color: '#55CA92',
            marginLeft:15 
            }} 
          />
          <FolderOutlined 
          className="icon" 
          style={{ 
            color: '#55CA92',
            marginLeft:15
            }} 
          />
          <ScissorOutlined 
          className="icon" 
          style={{ 
            color: '#55CA92',
            marginLeft:15
            }} 
          />
          <CommentOutlined 
          className="icon" 
          style={{ 
            color: '#55CA92',
            marginLeft:15
            }}
          />
          {/* 第三个容器，包含聊天的输入和发送 */}
          <div style={{ display: 'flex' }}>
            {/* 输入框 */}
            <Input
              value={this.state.message}
              onChange={e => this.setState({ message: e.target.value })}
              style={{ 
                width: '100%',
                 marginLeft: 10, 
                 marginRight: 10,
                 border:'none' 
                }}
            />
            {/* 发送按钮 */}
            <Button
              style={{background:'#55CA92',color:'white'}}
              onClick={() => {
                this.setState(prevState => ({
                  messages: [...prevState.messages, prevState.message],
                  message: ''
                }));
              }}
            >
              发送
            </Button>
          </div>
        </div>
      </div>
    );
  }
}

export default Topics;